Skip to content

JavaScript 中 new 操作符

new 关键词用于创建一个给定构造函数的实例对象,构造函数实例化对象的过程中会把构造函数自己的实例属性和原型对象属性给予实例对象

new 操作符做了哪些工作?

提示

第一步:创建一个空对象字面量

第二步:将构造函数的 原型对象 绑定到新对象上

第三步:将构造函数的 this 绑定到新对象上

第四步:如果构造函数中有 return 返回值,则 new 构造函数() 最终创建的实例对象 return 的值

js
function ab() {
  this.a = "a";
  this.b = "b";
}
console.log(new ab()); // {a: 'a', b: 'b'}

function cd() {
  this.a = "a";
  this.b = "b";
  return {
    c: "c",
    d: "d",
  };
}
console.log(new cd()); // {c: 'c', d: 'd'}

手写 new 操作符

先绑定原型,再绑定 this

js
function myNew(Func,...args){
  // 第一步:创建一个空对象字面量
  const obj = {};

  // 第二步:将构造函数的 原型对象 绑定到新对象上
  // 实现:空对象的对象原型 = 构造函数的原型对象,此步符合原型链
  obj.__proto__ = Func.prototype;

  // 第三步:将构造函数的 this 绑定到新对象上
  // 实现:借助 apply、call 把空对象放入构造函数中作为 this,执行一遍,重新挂载一遍构造函数的属性和方法,相当于临时改变 this 指向
  let result = Func.apply(obj, args);

  // 第四步:如果构造函数中 return 返回值是个对象,则 new 构造函数() 最终创建的实例对象 return 的值,否则返回那个对象字面量
  return result instanceof Object ? result : obj;
}

new 操作符都做了什么?(另一稿)

new 操作符

shell
# new 是什么
new 关键词用于创建一个给定构造函数的实例对象,构造函数实例化对象的过程中会把构造函数自己的实例属性和原型对象属性给予实例对象

# new 操作符做了哪些工作?
const 新对象 = new 构造函数()

第一步:创建一个空对象

第二步:链接原型(给新对象绑定构造函数的 prototype 原型对象)
将新对象的 __proto__ 属性指向构造函数的 prototype 对象,这样新对象就可以访问构造函数原型上的方法(将构造函数的 原型对象 绑定到新对象上)

第三步:绑定 this 并执行构造函数(给新对象绑定构造函数自身 this 的属性和方法
将构造函数的作用域赋给新对象(因此 this 指向这个新对象),并执行构造函数中的代码(为新对象添加属性)

第四步:返回新对象
如果构造函数 return 返回一个对象,则返回该对象;否则返回第一步创建的新对象

function myNew(constructor, ...args) {
  # 1. 创建一个空对象,其原型指向构造函数的 prototype
  const obj = Object.create(constructor.prototype);
  
  # 2. 将构造函数的 this 绑定到新对象上并执行
  const result = constructor.apply(obj, args);
  
  # 3. 如果构造函数返回对象,则返回该对象;否则返回新创建的对象
  return (result && typeof result === 'object') || typeof result === 'function' 
    ? result 
    : obj;
}